@import "@{root}/style/mixins/button-reset";
@import "@{icon}";
.container {
  width: 100%;
  height: 100%;
  .headerview {
    display: flex;
    flex-direction: column;

    .title {
      margin-top: 24rpx;
      text-align: center;
      font-size: 36rpx;
      color: rgba(0, 0, 0, 0.87);
    }

    .coursecount {
      margin-top: 3rpx;
      text-align: center;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.87);
    }

    .hint {
      margin-top: 12rpx;
      text-align: center;
      .hinttext {
        font-size: 24rpx;
        color: white;
        background-color: rgba(72, 178, 165, 1);
        text-align: center;
        border-radius: 20rpx;
        padding-left: 10rpx;
        padding-right: 10rpx;
      }
    }

    .bottomview {
      margin-top: 24rpx;
      width: 100%;
      height: 20rpx;
      background-color: rgba(242, 242, 242, 1);
    }
  }

  .commentview-headerInfo {
      
    .headerline {
      height: 20rpx;
      background-color: #f2f2f2;
    }
    .commentview-header {
      margin-top: 32rpx;
      display: flex;
      flex-direction: row;
      margin-left: 32rpx;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 34rpx;
        color: rgba(0, 0, 0, 0.87);
      }
      .write {
        color: rgba(255, 255, 255, 0.87);
        background-color: #39A89A;
        line-height: 46rpx;
        border-top-left-radius: 34rpx;
        border-bottom-left-radius: 34rpx;

        .iconfont {
          color: white;
          font-size: 20rpx;
          margin-left: 24rpx;
          text-align: center;
        }
        .write-text {
          font-size: 24rpx;
          background-color: #39A89A;
          color: rgba(255, 255, 255, 0.87);
          text-align: center;
          margin-right: 20rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
  .highestBottomview {
    height: 292rpx;
  }

  .middleBottomview {
    height: 100rpx;
  }
  .bottomview {
    height: 0rpx;
  }
  
  .bottomContainer {
    position: fixed;
    width: 100%;
    bottom: 0rpx;
    background-color: white;
    display: flex;
    flex-direction: column;
    .audio {
      width: 100%;
    }
    .buttonContainer {
      display: flex;
      flex-direction: row;
      background-color: white;
      .contentbutton {
        color: #48b2a5;
        background-color: white;
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }

      .contentbutton::after {
        border: 0rpx;
      }

      .playlistbutton {
        color: rgba(0, 0, 0, 0.54);
        background-color: white;
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }

      .playlistbutton::after {
        border: 0rpx;
      }

      .sharebutton {
        color: rgba(0, 0, 0, 0.54);
        background-color: white;
        .iconfont {
          color: red;
          font-size: 28rpx;
        }
        .sharebutton_text {
          margin-left: 4rpx;
          color: fade(#000, 54%);
          font-size: 28rpx;
        }
      }

      .sharebutton::after {
        border: 0rpx;
      }
    }
  }
}
